import { Button, message, Modal, Table, Tag } from 'antd'
import type { ColumnsType } from 'antd/es/table'
// antd图标
import { FormOutlined, DeleteOutlined } from '@ant-design/icons'
// 导入样式
import './index.scss'
import { useDispatch, useSelector } from 'react-redux'
import { useEffect, useState } from 'react'
import { delTableData, getTableData } from '../../../../../../utils/tableData'
import Popup from '../Popup'

// 配置TS
interface DataType {
  key: string
  date: string
  money: number
  sort: string
  notes: string
}

// 表格数据
// data 表格数据 ----------------->默认数据
let data: DataType[] = []
// 处理时间
let datax = new Date()
let nian = datax.getFullYear()
let yue: any =
  datax.getMonth() + 1 < 10
    ? '0' + (datax.getMonth() + 1)
    : datax.getMonth() + 1
let ri: any = datax.getDate() + 1
// 类别
let leiBie = ['早餐', '电子', '工资', '理财', '衣物', '其他']
for (let i = 0; i < 50; i++) {
  let dataS // 处理好的时间格式
  // 通过判断语句判断是否应该修改月份
  if (ri === '01') {
    ri = 30
    yue = yue - 1
    yue = yue < 10 ? '0' + yue : yue
    dataS = `${nian + '年' + yue + '月' + ri + '日'}`
  } else {
    ri = ri - 1
    ri = ri < 10 ? '0' + ri : ri
    dataS = `${nian + '年' + yue + '月' + ri + '日'}`
  }
  // 随机事件
  const sj = leiBie[Math.ceil(Math.random() * leiBie.length - 1)]
  // 判断是否是收入
  let income
  if (sj === '工资' || sj === '理财') {
    income = true
  } else if (sj === '其他') {
    income = Math.ceil(Math.random() * 2) === 1
  } else {
    income = false
  }
  const sjMoney = 100 + i
  data.push({
    key: i + ``,
    date: dataS,
    money: !income ? -(100 + i) : 100 + i,
    sort: sj,
    notes: sj,
  })
}
//  ------------- data 表格数据 ----------------->默认数据 end

// 表格页组件
function TableYe() {
  // 获取redux中的table数据
  const xx = useSelector((item: any) => {
    return item.BillDatax
  })

  // 表格数据 初始化为当前页的数据 然后再读取本地存储的数据
  const [dataT, setDateT] = useState(data)

  // 删除内容
  const removeItem = (key: any) => {
    Modal.confirm({
      title: '删除内容',
      content: '您确认删除吗?',
      onOk: () => {
        setDateT(
          dataT.filter((item: any) => {
            if (item.key != key) {
              return item
            }
          })
        )
        message.success('删除成功!')
      },
    })
    delTableData(
      dataT.filter((item: any) => {
        if (item.key != key) {
          return item
        }
      })
    )
  }

  // 配置具体表格内容
  const columns: ColumnsType<DataType> = [
    {
      title: '日期',
      dataIndex: 'date',
      key: 'date',
      render: (text) => <>{text}</>,
      sorter: (a, b) => {
        let c = Number(
          a.date.slice(0, 4) + a.date.slice(5, 7) + a.date.slice(8, 10)
        )
        let d = Number(
          b.date.slice(0, 4) + b.date.slice(5, 7) + b.date.slice(8, 10)
        )
        return c - d
      },
    },
    {
      title: '金额',
      dataIndex: 'money',
      key: 'money',
    },
    {
      title: '分类',
      dataIndex: 'sort',
      key: 'sort',
    },
    {
      title: '备注',
      key: 'notes',
      dataIndex: 'notes',
      render: (_, { notes }) => (
        <>
          <Tag>{notes}</Tag>
        </>
      ),
    },
    {
      title: '操作',
      key: 'operate',
      render: (_, record) => {
        return (
          <>
            <Popup alter="alter" data={_} />
            <Button
              style={{ position: 'relative', top: '-32px', left: '90px' }}
              type="primary"
              danger
              onClick={() => {
                removeItem(_.key)
              }}>
              删除
              <DeleteOutlined />
            </Button>
          </>
        )
      },
    },
  ]

  // 配置table底部功能
  const paginationProps = {
    showSizeChanger: true,
    showQuickJumper: true,
    // 默认为5条一页 当用户操作后 则消失
    defaultPageSize: 5,
  }

  // 监测表格数据
  useEffect(() => {
    setDateT(xx)
  }, [xx])

  return (
    <Table
      pagination={paginationProps}
      columns={columns}
      dataSource={dataT[0] === null ? data : dataT}
      scroll={{ x: 500, y: 360 }}
      footer={() => `共${dataT.length}条`}
    />
  )
}

export default TableYe
